<template>
  <view class="work-container">
    <!-- 商户角色专属界面 -->
    <view v-if="isMerchantRole">
      <!-- 顶部标题 -->
      <view class="merchant-header">
        <view class="header-title">
          <text class="title-main">法规中心</text>
          <text class="title-sub">了解最新政策法规与市场公告</text>
        </view>
      </view>

      <!-- 轮播图 -->
      <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <image :src="item.image" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

      <!-- 政策法规板块 -->
      <view class="regulation-section">
        <view class="section-header">
          <view class="section-title">
            <uni-icons type="flag" size="20" color="#1890ff"></uni-icons>
            <text>政策法规</text>
          </view>
          <view class="section-more" @click="goToRegulations">
            <text>更多</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="regulation-list">
          <view v-for="(item, index) in regulationList" :key="index" class="regulation-item" @click="viewRegulation(item)">
            <view class="regulation-content">
              <text class="regulation-title">{{ item.title }}</text>
              <text class="regulation-date">{{ item.publishDate }}</text>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 市场公告板块 -->
      <view class="notice-section">
        <view class="section-header">
          <view class="section-title">
            <uni-icons type="sound" size="20" color="#faad14"></uni-icons>
            <text>市场公告</text>
          </view>
          <view class="section-more" @click="goToNoticeList">
            <text>更多</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="notice-list">
          <view v-for="(item, index) in noticeList" :key="index" class="notice-item" @click="viewNotice(item)">
            <view class="notice-tag" v-if="item.isNew">NEW</view>
            <view class="notice-content">
              <text class="notice-title">{{ item.title }}</text>
              <text class="notice-time">{{ item.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他角色显示原工作台 -->
    <view v-else>
      <!-- 轮播图 -->
      <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <image :src="item.image" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

      <!-- 功能区域 -->
      <view class="function-section" v-if="visibleMenus.length > 0">
        <view class="section-header">
          <view class="section-title">
            <view class="title-dot"></view>
            <text>业务功能</text>
          </view>
          <view class="section-more">
            <text>全部</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="function-grid">
          <view v-for="menu in visibleMenus" :key="menu.key" class="function-item" @click="handleMenuClick(menu)">
            <view class="function-icon" :style="{ background: menu.color + '15' }">
              <uni-icons :type="menu.icon" size="28" :color="menu.color"></uni-icons>
            </view>
            <text class="function-name">{{ menu.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 结束 v-else -->

    <!-- 自定义tabbar -->
  </view>
</template>

<script>
import { getActiveBannerList, clickBanner } from '@/api/business/banner.js';
import { getActiveModules } from '@/api/system/appmodule.js';
import storage from '@/utils/storage';
import constant from '@/utils/constant';
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar';

export default {
  components: {
    CustomTabbar,
  },
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      data: [],
      userRoles: [], // 用户角色
      menuConfig: [], // 菜单配置
      visibleMenus: [], // 可见菜单
      regulationList: [], // 政策法规列表
      noticeList: [], // 公告列表
    };
  },
  computed: {
    // 检查是否有指定角色
    hasRole() {
      return (roleKey) => {
        return this.userRoles.includes(roleKey);
      };
    },
    // 是否是商户角色
    isMerchantRole() {
      return this.userRoles.includes('merchant');
    },
    // 是否是管理员
    isAdmin() {
      return this.hasRole('admin') || this.hasRole('market_safety_officer');
    },
  },
  onLoad() {
    this.loadBanners();
    this.loadUserRoles();
    this.loadDynamicModules(); // 加载动态模块配置
    // 根据角色设置页面标题
    this.setPageTitle();
    // 如果是商户角色，加载政策法规和公告
    if (this.isMerchantRole) {
      this.loadRegulations();
      this.loadNotices();
    }
  },
  onShow() {
    // 隐藏原生tabBar
    uni.hideTabBar();
  },
  methods: {
    // 加载轮播图
    async loadBanners() {
      try {
        const response = await getActiveBannerList();
        if (response.code === 200) {
          this.data = response.data || [];
          // 如果没有轮播图，不显示默认图片，保持空白
          if (this.data.length === 0) {
            this.data = [];
          } else {
            // 转换数据格式以适配原有的轮播组件
            this.data = this.data.map((item) => ({
              ...item,
              image: item.imageUrl, // 兼容原有的image字段
              content: item.title,
            }));
          }
        }
      } catch (error) {
        console.error('加载轮播图失败:', error);
        // 失败时也不显示默认图片，保持空数组
        this.data = [];
      }
    },

    // 加载用户角色
    loadUserRoles() {
      const roles = storage.get(constant.roles) || [];
      this.userRoles = roles.map((role) => {
        // 处理角色数据，可能是对象或字符串
        if (typeof role === 'object' && role.roleKey) {
          return role.roleKey;
        }
        return role;
      });
      console.log('当前用户角色:', this.userRoles);
    },

    // 加载动态模块配置
    async loadDynamicModules() {
      try {
        const response = await getActiveModules();
        if (response.code === 200 && response.data) {
          // 将后台配置转换为前端菜单格式
          const dynamicMenus = response.data
            .filter((module) => module.moduleType === '0')
            .map((module) => ({
              key: module.moduleKey,
              name: module.moduleName,
              icon: module.moduleIcon,
              color: module.moduleColor,
              path: module.pagePath,
              sortOrder: module.sortOrder,
              roles: this.getModuleRolesByKey(module.moduleKey), // 根据模块类型分配角色权限
              action: this.getActionByKey(module.moduleKey),
            }));

          // 合并动态菜单配置
          this.menuConfig = dynamicMenus;
          this.updateVisibleMenus();
        } else {
          // 如果获取失败，使用默认配置
          this.initMenuConfig();
        }
      } catch (error) {
        console.error('加载动态模块失败:', error);
        // 出错时使用默认配置
        this.initMenuConfig();
      }
    },

    // 根据模块key分配角色权限
    getModuleRolesByKey(key) {
      const roleMap = {
        // 商户专用功能（管理员也可以访问）
        supplier: ['merchant', 'admin'],
        merchant: ['admin', 'market_supervisor'], // 只有管理员可以管理商户
        goods: ['merchant', 'admin'],
        appointment: ['all'], // 所有角色都可以查看预约

        // 只有市场食品安全员可以审核
        audit: ['market_safety_officer'],

        // 查验相关功能
        check: ['entry_checker', 'inspector', 'market_safety_officer'],
        quicktest: ['inspector'], // 只有抽验员可以做快速检测

        // 文件管理功能
        file: ['admin', 'merchant'],
        image: ['admin', 'merchant'],

        // 统计功能
        statistics: ['admin', 'market_supervisor', 'food_safety_director', 'food_safety_chief'],
      };

      return roleMap[key] || ['admin']; // 默认只有管理员可见
    },

    // 根据模块key获取对应的action
    getActionByKey(key) {
      const actionMap = {
        supplier: 'goToSupplier',
        merchant: 'goToMerchant',
        goods: 'goToGoods',
        appointment: 'goToAppointment',
        audit: 'goToAudit',
        check: 'handleScan',
        file: 'goToFileManage',
        image: 'goToImageManage',
        quicktest: 'goToQuickTest',
        statistics: 'goToStatistics',
      };
      return actionMap[key] || null;
    },

    // 初始化菜单配置（默认配置）
    initMenuConfig() {
      // 定义所有可能的菜单
      // 根据数据库中的角色定义进行配置
      const allMenus = [
        {
          key: 'appointment',
          name: '预约申请',
          icon: 'calendar',
          color: '#007AFF',
          roles: ['merchant'], // 入场销售者可见
          action: 'goToAppointment',
        },
        {
          key: 'scan',
          name: '扫码查验',
          icon: 'scan',
          color: '#52C41A',
          roles: ['entry_checker', 'market_safety_officer'], // 入场核验人员/市场食品安全员可见（移除抽验人员）
          action: 'handleScan',
        },
        {
          key: 'records',
          name: '预约记录',
          icon: 'list',
          color: '#FF9500',
          roles: ['all'], // 所有角色可见
          action: 'goToRecords',
        },
        {
          key: 'supplier',
          name: '供货商管理',
          icon: 'shop',
          color: '#722ED1',
          roles: ['merchant', 'admin'], // 入场销售者和管理员可见
          action: 'goToSupplier',
        },
        {
          key: 'goods',
          name: '商品管理',
          icon: 'cart',
          color: '#13C2C2',
          roles: ['merchant', 'admin'], // 入场销售者和管理员可见
          action: 'goToGoods',
        },
        {
          key: 'audit',
          name: '预约审核',
          icon: 'checkbox',
          color: '#FA541C',
          roles: ['market_safety_officer'], // 只有市场食品安全员可见
          action: 'goToAudit',
        },
        {
          key: 'inspection',
          name: '抽检任务',
          icon: 'eye',
          color: '#FAAD14',
          roles: ['inspector'], // 抽验人员可见
          action: 'goToInspection',
        },
        {
          key: 'statistics',
          name: '数据统计',
          icon: 'bars',
          color: '#FA8C16',
          roles: ['admin', 'market_supervisor', 'food_safety_chief', 'market_safety_officer'], // 超管/市场监管局/食品安全总监/市场食品安全员可见
          action: 'goToStatistics',
        },
        {
          key: 'notice',
          name: '公告管理',
          icon: 'sound',
          color: '#1890FF',
          roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
          action: 'goToNotice',
        },
        {
          key: 'merchant',
          name: '商户管理',
          icon: 'shop-filled',
          color: '#9254DE',
          roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
          action: 'goToMerchant',
        },
        {
          key: 'check_records',
          name: '查验记录',
          icon: 'compose',
          color: '#52C41A',
          roles: ['entry_checker', 'inspector', 'market_safety_officer', 'admin'], // 入场核验人员/抽验人员/市场食品安全员/超管可见
          action: 'goToCheckRecords',
        },
        {
          key: 'quick_test',
          name: '检测录入',
          icon: 'compose',
          color: '#F5222D',
          roles: ['inspector', 'market_safety_officer'], // 抽验人员/市场食品安全员可见
          action: 'goToQuickTest',
        },
      ];

      this.menuConfig = allMenus;
      this.updateVisibleMenus();
    },

    // 更新可见菜单
    updateVisibleMenus() {
      this.visibleMenus = this.menuConfig.filter((menu) => {
        // 超管可以看到所有菜单
        if (this.hasRole('admin')) {
          return true;
        }

        // 检查菜单的角色限制
        if (menu.roles.includes('all')) {
          return true;
        }

        // 检查用户是否有对应角色
        return menu.roles.some((role) => this.hasRole(role));
      });
    },

    // 处理菜单点击
    handleMenuClick(menu) {
      if (menu.action && this[menu.action]) {
        this[menu.action]();
      } else {
        uni.showToast({
          title: '功能开发中',
          icon: 'none',
        });
      }
    },

    // 轮播图点击
    async clickBannerItem(item) {
      // 统计点击数
      if (item.bannerId) {
        try {
          await clickBanner(item.bannerId);
        } catch (error) {
          console.error('点击统计失败:', error);
        }
      }

      // 跳转链接
      if (item.linkUrl) {
        uni.navigateTo({
          url: item.linkUrl,
        });
      } else {
        console.log('轮播图点击:', item.title || item.content);
      }
    },
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    changeBusinessGrid(e) {
      console.log('点击了业务功能：', e.detail.index);
      const index = e.detail.index;
      switch (index) {
        case 'appointment':
          // 跳转到预约申请页面（先跳转到食用农产品预约）
          uni.navigateTo({
            url: '/pages/appointment/food',
          });
          break;
        case 'scan':
          // 调用扫码功能
          this.handleScan();
          break;
        case 'records':
          // 跳转到预约记录
          uni.navigateTo({
            url: '/pages/appointment/record',
          });
          break;
        case 'supplier':
          // 跳转到供货商管理
          uni.navigateTo({
            url: '/pages/supplier/list',
          });
          break;
        case 'goods':
        case 'statistics':
          this.$modal.showToast('功能开发中~');
          break;
        default:
          break;
      }
    },
    changeGrid(e) {
      this.$modal.showToast('模块建设中~');
    },

    // 跳转到预约申请
    goToAppointment() {
      console.log('跳转到预约管理');
      // 根据角色跳转到不同页面
      const roles = this.userRoles || [];

      // 商户角色跳转到预约类型选择页面
      if (roles.includes('merchant')) {
        // 商户看到"预约管理"应该跳转到选择预约类型页面
        uni.navigateTo({
          url: '/pages/appointment/index', // 预约类型选择页面
        });
      }
      // 审核员角色跳转到审核管理页面
      else if (roles.includes('market_safety_officer')) {
        uni.navigateTo({
          url: '/pages/audit/list', // 审核管理页面
        });
      }
      // 入场核验员角色跳转到入场核验页面
      else if (roles.includes('entry_checker')) {
        uni.navigateTo({
          url: '/pages/check/entry', // 入场核验页面
        });
      }
      // 抽验员角色跳转到抽检任务列表页面
      else if (roles.includes('inspector')) {
        uni.navigateTo({
          url: '/pages/check/tasks', // 抽检任务列表页面
        });
      }
      // 默认跳转到预约记录页面
      else {
        uni.navigateTo({
          url: '/pages/appointment/record',
        });
      }
    },
    // 跳转到预约记录
    goToRecords() {
      console.log('跳转到预约记录');
      uni.navigateTo({
        url: '/pages/appointment/record',
      });
    },
    // 跳转到供货商管理
    goToSupplier() {
      console.log('跳转到供货商管理');
      uni.navigateTo({
        url: '/pages/supplier/list',
      });
    },

    // 跳转到商品管理
    goToGoods() {
      uni.showToast({
        title: '商品管理功能开发中',
        icon: 'none',
      });
    },

    // 跳转到预约审核
    goToAudit() {
      uni.navigateTo({
        url: '/pages/audit/list',
      });
    },

    // 跳转到抽检管理
    goToInspection() {
      uni.navigateTo({
        url: '/pages/check/tasks',
      });
    },

    // 跳转到数据统计
    goToStatistics() {
      uni.showToast({
        title: '统计功能开发中',
        icon: 'none',
      });
    },

    // 跳转到公告管理
    goToNotice() {
      uni.navigateTo({
        url: '/pages/notice/list',
      });
    },

    // 跳转到商户管理
    goToMerchant() {
      uni.showToast({
        title: '商户管理功能开发中',
        icon: 'none',
      });
    },

    // 跳转到查验记录
    goToCheckRecords() {
      uni.navigateTo({
        url: '/pages/check/records',
      });
    },

    // 跳转到快速检测
    goToQuickTest() {
      uni.navigateTo({
        url: '/pages/check/quicktest',
      });
    },

    // 设置页面标题
    setPageTitle() {
      // 需要先加载角色信息
      setTimeout(() => {
        if (this.isMerchantRole) {
          uni.setNavigationBarTitle({
            title: '法规中心',
          });
          // 动态修改tabBar文字
          uni.setTabBarItem({
            index: 1, // 工作台是第二个tab，索引为1
            text: '法规中心',
          });
        } else {
          uni.setNavigationBarTitle({
            title: '工作台',
          });
          // 确保其他角色看到的是工作台
          uni.setTabBarItem({
            index: 1,
            text: '工作台',
          });
        }
      }, 100);
    },

    // 加载政策法规
    async loadRegulations() {
      try {
        // 暂时使用模拟数据，后续对接真实接口
        this.regulationList = [
          {
            id: 1,
            title: '农产品质量安全法实施细则',
            publishDate: '2024-01-15',
            source: '农业农村部',
          },
          {
            id: 2,
            title: '食品安全国家标准管理办法',
            publishDate: '2024-01-10',
            source: '市场监管总局',
          },
          {
            id: 3,
            title: '农贸市场管理规范（2024版）',
            publishDate: '2024-01-05',
            source: '商务部',
          },
        ];
      } catch (error) {
        console.error('加载政策法规失败:', error);
      }
    },

    // 加载公告
    async loadNotices() {
      try {
        // 暂时使用模拟数据，后续对接真实接口
        this.noticeList = [
          {
            id: 1,
            title: '关于开展春节前食品安全专项检查的通知',
            createTime: '2024-01-20 10:00',
            isNew: true,
          },
          {
            id: 2,
            title: '市场休市通知',
            createTime: '2024-01-18 15:30',
            isNew: true,
          },
          {
            id: 3,
            title: '食品安全培训通知',
            createTime: '2024-01-15 09:00',
            isNew: false,
          },
        ];
      } catch (error) {
        console.error('加载公告失败:', error);
      }
    },

    // 查看政策法规详情
    viewRegulation(item) {
      uni.navigateTo({
        url: `/pages/regulation/detail?id=${item.id}`,
      });
    },

    // 查看公告详情
    viewNotice(item) {
      uni.navigateTo({
        url: `/pages/notice/detail?id=${item.id}`,
      });
    },

    // 跳转到政策法规列表
    goToRegulations() {
      uni.navigateTo({
        url: '/pages/regulation/list',
      });
    },

    // 跳转到公告列表
    goToNoticeList() {
      uni.navigateTo({
        url: '/pages/notice/list',
      });
    },

    // 处理扫码
    handleScan() {
      console.log('调用扫码功能');
      uni.scanCode({
        onlyFromCamera: false, // 允许从相册选择
        scanType: ['qrCode'], // 只扫描二维码
        success: (res) => {
          console.log('扫码结果：', res.result);
          // 解析扫码结果
          this.parseScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫码失败：', err);
          uni.showToast({
            title: '扫码失败',
            icon: 'none',
          });
        },
      });
    },
    // 解析扫码结果
    parseScanResult(result) {
      try {
        // 检查是否是预约二维码
        // 支持多种格式：
        // 1. 自定义格式：ZHJG://VERIFY/?applyNo=xxx&applyId=xxx&code=xxx
        // 2. 小程序路径格式：/pages/check/verify?applyNo=xxx&applyId=xxx&code=xxx
        // 3. HTTP URL格式：http://xxx/qr?applyNo=xxx&applyId=xxx&code=xxx

        let isValidQr = false;
        let queryString = '';

        if (result.includes('ZHJG://VERIFY/')) {
          // 自定义格式
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        } else if (result.includes('/pages/check/verify')) {
          // 小程序路径格式
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        } else if (result.includes('/qr?') || result.includes('applyNo=')) {
          // HTTP URL格式或包含预约编号
          isValidQr = true;
          const queryIndex = result.indexOf('?');
          if (queryIndex > -1) {
            queryString = result.substring(queryIndex + 1);
          }
        }

        if (isValidQr && queryString) {
          const params = {};

          // 解析查询参数
          queryString.split('&').forEach((param) => {
            const [key, value] = param.split('=');
            if (key && value) {
              params[key] = decodeURIComponent(value);
            }
          });

          if (params.applyNo && params.code) {
            // 跳转到验证页面
            uni.navigateTo({
              url: `/pages/check/verify?applyNo=${params.applyNo}&applyId=${params.applyId || ''}&code=${params.code}`,
            });
          } else {
            uni.showToast({
              title: '二维码参数不完整',
              icon: 'none',
            });
          }
        } else {
          // 不是预期的二维码格式
          uni.showToast({
            title: '无效的二维码',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('解析二维码失败：', error);
        uni.showToast({
          title: '二维码解析失败',
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(180deg, #e8f5e9 0%, #f1f8e9 100%);
  min-height: 100%;
  height: auto;
  padding-bottom: 120rpx; /* 为自定义tabbar留出空间 */
}

view {
  font-size: 14px;
  line-height: inherit;
}
/* #endif */

.work-container {
  background: linear-gradient(180deg, #e8f5e9 0%, #f1f8e9 100%);
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 商户界面样式 */
.merchant-header {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  padding: 40rpx 30rpx;
  color: #fff;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.title-main {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.title-sub {
  font-size: 26rpx;
  opacity: 0.9;
}

.merchant-functions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 20rpx;
  background: #fff;
  margin-top: -20rpx;
  border-radius: 20rpx 20rpx 0 0;
}

.function-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s;
}

.function-card:active {
  transform: scale(0.98);
  background: #f0f1f3;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 4rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #999;
}

/* 政策法规板块 */
.regulation-section,
.notice-section {
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.regulation-section .section-header,
.notice-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.regulation-section .section-title,
.notice-section .section-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.section-more {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 26rpx;
  color: #999;
}

.regulation-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.regulation-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  transition: all 0.3s;
}

.regulation-item:active {
  background: #f0f1f3;
}

.regulation-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.regulation-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.regulation-date {
  font-size: 24rpx;
  color: #999;
}

/* 公告板块 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx;
  background: #fffbe6;
  border-radius: 12rpx;
  border-left: 4rpx solid #faad14;
  position: relative;
}

.notice-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 4rpx 12rpx;
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: #fff;
  font-size: 20rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.notice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.notice-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  padding-right: 60rpx;
}

.notice-time {
  font-size: 24rpx;
  color: #999;
}

/* 轮播图优化 */
.uni-swiper-dot-box {
  margin: 20rpx;
}

.swiper-box {
  height: 380rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 380rpx;
}

.swiper-item image {
  width: 100%;
  height: 100%;
}

/* 功能区块样式 */
.function-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.title-dot {
  width: 8rpx;
  height: 32rpx;
  background: #1890ff;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-more {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
}

/* 业务功能网格 */
.function-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}

.function-item {
  width: calc(25% - 20rpx);
  margin: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  transition: all 0.3s;
}

.function-item:active {
  transform: scale(0.95);
}

.function-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  transition: all 0.3s;
}

.function-item:hover .function-icon {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.function-name {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

/* 系统管理网格 */
.system-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -8rpx;
}

.system-item {
  width: calc(25% - 16rpx);
  margin: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  background: #f8f0ff;
  border-radius: 12rpx;
  transition: all 0.3s;
}

.system-item:active {
  background: #f0e0ff;
  transform: scale(0.95);
}

.system-icon {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(114, 46, 209, 0.15);
}

.system-name {
  font-size: 24rpx;
  color: #722ed1;
  text-align: center;
}

/* 空状态优化 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  opacity: 0.6;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
  margin-top: 20rpx;
}

@media screen and (min-width: 500px) {
  .function-item {
    width: calc(20% - 20rpx);
  }

  .system-item {
    width: calc(20% - 16rpx);
  }
}
</style>
